<template>
    <div class="home">
        <div>
            <el-container :style="containerHeight">
                <el-header>
                    <Header></Header>
                </el-header>
                <el-container>
                    <el-aside width="200px" style="border-right: 1px solid #ccc;box-sizing: border-box">
                        <NavigationMenu></NavigationMenu>
                    </el-aside>
                    <el-main>
                        <!--
  name(必传)：应用名称
  url(必传)：应用地址，会被自动补全为http://localhost:8081/index.html
  baseroute(可选)：基座应用分配给子应用的基础路由，就是上面的 `/child/my-page`
  data：通过data属性发送数据给子应用
 -->
                        <micro-app v-show="!MicroApp && !app" :data="{type: '发送给子应用一的数据'}" name='app1'
                                   url='http://localhost:10110/'
                                   baseroute='/child/my-page' keep-alive></micro-app>
                        <micro-app v-show="!MicroApp && app" :data="{type: '发送给子应用二的数据'}" name='app2'
                                   url='http://localhost:10111/'
                                   baseroute='/child/my-page2' keep-alive></micro-app>
                        <router-view/>
                    </el-main>
                </el-container>
            </el-container>
        </div>
    </div>
</template>

<script>
    import Header from './../components/Header/index'
    import NavigationMenu from './../components/NavigationMenu/index'

    export default {
        name: 'Home',
        components: {Header, NavigationMenu},
        data() {
            return {
                MicroApp: "",
                app: "",
                containerHeight: {
                    height: ""
                }
            };
        },
        created() {
            //动态调整左侧菜单栏高度
            var docHeight = document.documentElement.clientHeight;
            this.containerHeight.height = docHeight + "px";
        },
        watch: {
            $route() {
                if (window.location.href.indexOf('/my-page') == -1) {
                    this.MicroApp = true;
                } else {
                    this.MicroApp = false;
                    if (window.location.href.indexOf('/my-page2') != -1) {
                        this.app = true
                    } else {
                        this.app = false
                    }
                }
            }
        }
    }
</script>

<style scoped>
    .el-header {
        padding: 0;
    }
</style>
